page模式和component模式 |
您所在的位置：网站首页 › js component构造器 › page模式和component模式 |
page模式和component模式
|
page模式和component模式
前言说明1 生命周期2 实例page模式component模式
前言
这一节了解page和component的区别。 说明page是官方默认组件，样式固定单一；component是自定义组件，可以灵活配置。 1 生命周期Page: onLoad()、onReady()、onShow()、onHide()、onUnload()五个页面生命周期函数，其分别是页面加载、就绪、渲染、隐藏、卸载时被调用。components： created()、attached()、ready()、moved()、detached()分别是组件实例化(未导入节点树)、节点树完成、布局完成、移动、移除时被调用(2.2.3之后，可以在lifetimes:{}中定义,优先级为最高)组件所在页面的生命周期pageLifeTimes：show()、hide()、resize()分别是页面展示、隐藏、尺寸变化时被调用 2 实例以底部和顶部导航栏为例。 page模式如果是功能简单，页面不多的小程序，所有页面使用page注册即可。 直接拿 第三节 的demo来修改，不详细描述。 打开app.json，可以配置顶部导航栏和底部的tabbar "tabBar": { "color": "#707070", "selectedColor": "#2DBB55", "backgroundColor": "#FAFAFA", "list": [ { "selectedIconPath": "image/main_select.png", "iconPath": "image/main.png", "pagePath": "pages/tab/tab1", "text": "首页" }, { "selectedIconPath": "image/depart_select.png", "iconPath": "image/depart.png", "pagePath": "pages/tab/tab2", "text": "功能大全" }, { "selectedIconPath": "image/mine_select.png", "iconPath": "image/mine.png", "pagePath": "pages/tab/tab3", "text": "我的" } ] }, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#6FC", "navigationBarTitleText": "基本效果", "navigationBarTextStyle": "black" },效果如下： 这里引入colorUI，colorUI在下一节中再去详细了解。 1）colorUI传送门 ：https://github.com/weilanwl/ColorUI 2）下载后，将demo下的colorui拷贝至项目根目录 4）打开app.json，引入colorui组件 "usingComponents": { "cu-custom": "/colorui/components/cu-custom" },5）配置顶部导航栏，设置为自定义 "window": { "navigationStyle": "custom" },6）打开app.js，获取系统参数 onLaunch: function () { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; } }) },7）打开tab1.js const app = getApp(); Component({ data: { PageCur: 'main' }, methods: { NavChange(e) { this.setData({ PageCur: e.currentTarget.dataset.cur }) }, } })8）打开tab1.wxml，自定义导航栏 |
3）打开app.wxss，引入colorui样式【本文地址】
今日新闻 |
推荐新闻 |